<!--
 * @Descripttion:
 * @version:
 * @Author: caiailing
 * @Date: 2023-03-29 14:42:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-07 11:49:22
-->
<script setup lang="ts">
import { useTitle } from '@/hooks/useTitle'
import { forward } from '@/utils/router/router'
const userStore = useStore('user')
onLoad(async () => {
  await userStore.userInfo({})
})
const { title, changeTitle } = useTitle()
function goTest() {
  forward('test', {
    a: 1
  })
}
</script>

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <u-line color="#2979ff"></u-line>
    <text class="u-line-1"
      >超过一行显示省略号，是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛
    </text>
    <button @click="changeTitle">改变title</button>
    <button @click="goTest">点击跳转测试页</button>
    <Iconfont name="icon-add" color="red" />
    <Iconfont name="icon-add" size="40rpx" />
    <Iconfont name="icon-add" size="60rpx" />
  </view>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo {
  margin-left: auto;
  margin-right: auto;
  margin-top: 200rpx;
  margin-bottom: 50rpx;
  width: 200rpx;
  height: 200rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
::v-deep .u-tabbar {
  color: red;
  .u-tabbar-item__icon {
    color: red;
    .u-page__item__slot-icon {
      width: 40rpx !important;
      height: 40rpx !important;
    }
  }
}
</style>
